<!--
 * @copyright: Huang Ding
 * @Author: ding-cx
 * @Date: 2021-04-02 14:58:16
 * @LastEditors: ding-cx
 * @LastEditTime: 2021-04-02 15:51:27
 * @Description: file content
-->
<template>
  <el-scrollbar
    :class="[hiddenY ? 'base-scrollbar__hidden_y' : '']"
    :style="{ height: treeHeight }"
    wrap-class="scrollbar-wrapper"
  >
    <slot></slot>
  </el-scrollbar>
</template>

<script>
import { computed } from "@vue/composition-api";

export default {
  name: "base-scrollbar",
  setup(props, ctx) {
    const treeHeight = computed(() => {
      return props.reduce
        ? window.hei.value - props.height + "px"
        : props.height + "px";
    });
    return {
      treeHeight,
    };
  },
  props: {
    reduce: {
      type: Boolean,
      default: true,
    },
    /** 固定高度或屏幕高减去height的高度 */
    height: {
      type: Number,
      default: 100,
    },
    hiddenY: {
      type: Boolean,
      default: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.base-scrollbar__hidden_y {
  ::v-deep.el-scrollbar__bar.is-horizontal {
    height: 0px !important;
    display: none !important;
  }
   
}
</style>